<template>
  <div id="">
    <!--内容-->

    <header class="flex-col padding-r15 bge">
      <div class="box1 bor-r bgfff padding-l10 margin-l15 flex-col flex-middle">
        <i class="iconfont icon-sousuo font-20"></i>
        <input type="text" class="box1 padding-lr10" v-model="citySearch" placeholder="请输入要搜索的城市">
        <div class="padding-lr10" v-show="citySearch.length" @click="citySearch = ''">
          <i class="iconfont icon-qingchu"></i>
        </div>
      </div>
      <div class="padding-l15 box-center" v-show="!citySearch.length" @click="back">取消</div>
    </header>
    <div>
      <div id="showCityContent"></div>
      <div v-for="(item,i) in showCity" :key="i" class="letter-item">
        <div>
          <a :id="item.letter">{{item.letter}}</a>
        </div>
        <div v-for="i in item.citylist" :key="i" @click="getCity(i)">{{i}} </div>
      </div>
    </div>

    <aside class="letter-aside">
      <ul>
        <li v-for="(item,i) in showCity" :key="i" @click="naver(item.letter)">{{item.letter}} </li>
      </ul>
    </aside>

    <div id="tip">
      {{tipString}}
    </div>

  </div>
</template>


<script>
import pinyin from "../../../static/lib/web-pinyin/bundle.js";
import city from "../../../static/city.js";
var cityLists = [];
var cityNames = [];
var cityNamesFilter = [];
var letter = [];
var countPage = 0;
var tipLetter = "";
var citySearch = "";
var showCity = [];
var showCityList = [];
var showCityTemp;
export default {
  beforeCreated: function() {},
  updated: function() {},
  created: function() {
    this.getAllCity();

    // let cityList = city.provinces;

    // for (let i in cityList) {
    //   cityLists = cityList[i].citys;
    //   for (let j in cityLists) {
    //     cityNames.push(cityLists[j].citysName);
    //   }
    // }
    // cityNamesFilter = cityNames;
    // this.cityFilter(this.citySearch);
  },
  components: {},
  mounted() {
    // window.scrollTo(0, 500);
  },
  methods: {
    getCity(val) {
      let cityList = this.cityAllList;
      for (let i in cityList) {
        if (cityList[i].cityname === val) {
          this.$store.commit("city", {
            id: cityList[i].cityid,
            name: val
          });
          break;
        }
      }
      this.back();
    },
    // 获取所有城市
    getAllCity() {
      let that = this;
      this.http
        .get("city/list", {
          //city/list  province
          location: true
        })
        .then(res => {
          that.cityAllList = res.cityList;

          // console.log(JSON.stringify(res))

          let cityList = res.cityList;
          let cityNames = [];
          for (let i in cityList) {
            cityNames.push(cityList[i].cityname);
          }
          cityNamesFilter = cityNames;
          that.cityFilter(that.citySearch);
        });
    },
    buildLetter() {
      // 构建字母项
      letter = [];
      for (let i = 0; i < 26; i++) {
        let obj = {};
        obj.letter = String.fromCharCode(65 + i);
        obj.citylist = [];
        letter.push(obj);
      }
    },
    getFirstLetter(str) {
      //  得到城市第一个字的首字母
      return pinyin
        .pinyin(str)[0][0]
        .charAt(0)
        .toUpperCase();
    },
    buildItem(cityNamesFilter) {
      // 构建城市
      this.buildLetter();
      let _this = this;
      for (let i = 0; i < 26; i++) {
        letter[i].citylist = [];
      }
      for (let i = 0; i < cityNamesFilter.length; i++) {
        let _index = Number(
          _this.getFirstLetter(cityNamesFilter[i]).charCodeAt() - 65
        );
        if (_index >= 0 && _index < 26) {
          letter[_index].citylist.push(cityNamesFilter[i]);
        }
      }
      // 如果letter中citylist中没有值的话，过滤这一项
      showCity = showCityTemp = letter.filter(function(value) {
        let len = value.citylist.length;
        return len > 0;
      });
    },
    naver(id) {
      // 点击右边字母滚动
      this.tipString = id;
      let obj = document.getElementById(id);
      let tip = document.getElementById("tip");
      tip.setAttribute("class", "tipAppear");
      setTimeout(function() {
        tip.removeAttribute("class");
      }, 500);
      let oPos = obj.offsetTop;
      return window.scrollTo(0, oPos - 36);
    },
    cityFilter(city) {
      // 城市搜索筛选
      let showCityListTemp;
      this.buildItem(cityNamesFilter);
      showCity = showCityTemp;
      showCity = showCity.filter(function(value) {
        showCityList = value.citylist;
        showCityListTemp = showCityList.filter(function(val) {
          return val.indexOf(city) > -1;
        });
        value.citylist = showCityListTemp;
        return value.citylist.length > 0;
      });
      this.showCity = showCity;
      if (showCity.length === 0) {
        let _showCityContent = document.getElementById("showCityContent");
        _showCityContent.innerText = "查询不到结果";
        _showCityContent.setAttribute("class", "tipShow");
      } else {
        document.getElementById("showCityContent").innerText = "";
      }
    }
  },
  data() {
    return {
      seekText: "",
      backText: "取消",
      seek: false,
      cityNames: cityNamesFilter,
      letter: letter,
      tipString: tipLetter,
      citySearch: citySearch,
      showCity: showCity,
      cityAllList: null
    };
  },
  watch: {
    citySearch(newCitySearch) {
      this.cityFilter(newCitySearch);
    }
  }
};
</script>

<style lang="scss" scoped>
header {
  position: fixed;
  width: 100%;
  box-sizing: border-box;
  background: #eee;
  padding: 0.06rem 0.15rem 0.06rem 0;
  & > div {
    height: 0.33rem;
  }
}
#showCityContent {
  padding-top: 0.45rem;
}
#city {
  position: relative;
}
.letter-item {
  > div:first-child {
    font-size: 16px;
    // line-height: 2em;
    background: #eee;
    margin-bottom: 2px;
  }
  > div {
    padding: 0.12rem 0.2rem;
    border-bottom: 1px solid #eaeaea;
  }
}
.letter-aside {
  position: fixed;
  right: 10px;
  top: 1rem;
  ul {
    list-style: none;
    line-height: 1.4em;
    font-size: 14px;
    color: #aaa;
    li {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0.02rem 0;
    }
  }
}
#tip {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border: 1px solid #333333;
  width: 100px;
  height: 100px;
  z-index: 10;
  text-align: center;
  line-height: 100px;
  font-size: 50px;
  opacity: 0;
}
.tipAppear {
  animation: appearTip 1 linear 0.5s;
}
@keyframes appearTip {
  0% {
    opacity: 1;
  }
  80% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
.search-city {
  text-align: center;
  padding: 5px 0;
  input {
    line-height: 24px;
    border-radius: 5px;
    outline: none;
  }
}
.tipShow {
  text-align: center;
  line-height: 60px;
  font-size: 16px;
  color: #bbbbbb;
}
</style>